<template>
    <div class="list">
        <div>
            <h2>用户借款页面</h2>
        </div>
        <el-form :model="loanForm" :rules="rulesForm" ref="loanForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="请输入真实姓名" prop="loanLoanUserName" label-width="200px">
                <el-input v-model="loanForm.loanLoanUserName"></el-input>
            </el-form-item>
            <el-form-item label="请输入手机号" prop="loanLoanUserPhone" label-width="200px">
                <el-input v-model="loanForm.loanLoanUserPhone"></el-input>
            </el-form-item>
            <el-form-item label="请输入借款金额" prop="loanLoanMoney" label-width="200px">
                <el-input v-model="loanForm.loanLoanMoney"></el-input>
            </el-form-item>
            <el-form-item label="请输入借款期限" prop="loanLoanLastTerm" label-width="200px">
                <el-input v-model="loanForm.loanLoanLastTerm"></el-input>
            </el-form-item>
            <el-form-item label="请上传身份证" label-width="200px" >
                <el-upload
                class="avatar-uploader"
                action="http://localhost/dev-api/loan/loanFile/sendFile"
                :show-file-list="false"
                :headers="token"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
                <img v-if="loanForm.loanLoanCard" :src="loanForm.loanLoanCard" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm">提交申请</el-button>
                <el-button @click="resetForm">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import Cookies from 'js-cookie'
import {addLoan} from '@/api/loan/loanlist'
export default {
    name:'userloan',
    data(){
        return {
            token:{Authorization:Cookies.get("Admin-Token")},
            loanForm:{
                loanUserId: 1,
                loanLoanProductsId: 1,
                loanLoanUserName:'',
                loanLoanUserPhone:'',
                loanLoanMoney:'',
                loanLoanLastTerm:'',
                loanLoanCard:''
            },
            rulesForm:{
                loanLoanUserName:[{ required: true, message: '请填写真实姓名', trigger: 'blur' }],
                loanLoanUserPhone:[{ required: true, message: '请填写手机号', trigger: 'blur' }],
                loanLoanMoney:[{ required: true, message: '请填写借款金额', trigger: 'blur' }],
                loanLoanLastTerm:[{ required: true, message: '请填写借款期限', trigger: 'blur' }],
            },
        }
    },
    methods:{
        submitForm(){
            console.log(this.loanForm)
            addLoan(this.loanForm).then(res => {
                if(res.code === 200){
                    this.$message.success("添加借款申请成功")
                    console.log("添加借款申请成功")

                    this.$router.push("/usersendsucs")
                }else{
                    this.$message.error("添加借款申请失败")
                    console.log("添加借款申请失败")
                }
            })
        },
        resetForm(){
            this.loanForm.loanLoanMoney=''
            this.loanForm.loanLoanLastTerm=''
        },
        handleAvatarSuccess(res) {
            console.log(res)
            this.loanForm.loanLoanCard=res.msg
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
            this.$message.error('上传身份证图片只能是 JPG 格式!');
            }
            
            return isJPG;
        }
    },
    mounted(){

    }
}
</script>

<style>
.list{
    width: 900px;
    height: 300px;
    margin: auto;
}
</style>